<template>
    <div style="width: 100%;">

        <CompareItem v-for="(item, index) in comAssStore.compareList" :key="index" :data="item" :index="index">
        </CompareItem>


        <div style="margin-top: 25px;">
            <el-button style="font-weight: bold;" :disabled="comAssStore.compareList.length < 2" type="primary" plain
                @click="compareAss">对 比</el-button>
            <el-button @click="reset" style="font-weight: bold;" type="danger" plain>重 置</el-button>
        </div>

        <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="70%">
            <div v-if="tabStore.assembly_type === 'CPU'" class="compare">
                <CPU v-for="(item, index) in comAssStore.compareList" :key="index" :data="item"></CPU>
            </div>
            <div v-else-if="tabStore.assembly_type === 'GPU'" class="compare">
                <GPU v-for="(item, index) in comAssStore.compareList" :key="index" :data="item"></GPU>
            </div>
            <div v-else-if="tabStore.assembly_type === '主板'" class="compare">
                <Center v-for="(item, index) in comAssStore.compareList" :key="index" :data="item"></Center>
            </div>
            <div v-else-if="tabStore.assembly_type === '内存'" class="compare">
                <Memory v-for="(item, index) in comAssStore.compareList" :key="index" :data="item"></Memory>
            </div>
            <div v-else-if="tabStore.assembly_type === '固态硬盘'" class="compare">
                <Ssd v-for="(item, index) in comAssStore.compareList" :key="index" :data="item"></Ssd>
            </div>

            <div v-else-if="tabStore.assembly_type === '硬盘'" class="compare">
                <Hhd v-for="(item, index) in comAssStore.compareList" :key="index" :data="item"></Hhd>
            </div>
        </el-drawer>


    </div>
</template>

<script setup lang="ts">
import CompareItem from './Compare/CompareItem.vue';
import { ref } from 'vue'
import { useComAssStore } from '@/store/useComAssStore';
import { useTabStore } from '@/store/useTabStore';
import Center from '@/view/Info/components/content/Center.vue';
import CPU from '@/view/Info/components/content/CPU.vue';
import GPU from '@/view/Info/components/content/GPU.vue';
import Hhd from '@/view/Info/components/content/Hhd.vue';
import Memory from '@/view/Info/components/content/Memory.vue';
import Ssd from '@/view/Info/components/content/Ssd.vue';

const tabStore = useTabStore()
const comAssStore = useComAssStore();

const drawer = ref(false)

const reset = () => {
    comAssStore.clearCompare()
}

const compareAss = () => {
    //comAssStore.compareList值为2

    drawer.value = true





}

</script>

<style scoped lang="scss">
.compare {
    display: flex;
    justify-content: space-between;
}
</style>